<template>
    <div class="dingdan">
        <div @click="change0" :style="{color:color0}" class="topLi">{{arr[0]}}</div>
        <div @click="change1" :style="{color:color1}" class="topLi">{{arr[1]}}</div>
        <div @click="change2" :style="{color:color2}" class="topLi">{{arr[2]}}</div>

        <!--       门店搜索 -->
        <span class="from">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户手机号:">
                <el-input v-model="formInline.tel"></el-input>
            </el-form-item>
            <el-form-item label="下单人姓名:">
                <el-input v-model="formInline.name"></el-input>
            </el-form-item>
                <el-form-item label="状态:">
                <el-select v-model="formInline.status" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            @click="{style:color='#1890ff'}">
                    </el-option>
                </el-select>
            </el-form-item>

                <el-form-item label="所属门店:">
                <el-input v-model="formInline.mendian"></el-input>
            </el-form-item>


                <!--                //日期-->
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        门店列表展示帮我取-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}"
                    :class="{visible:boolean}"
                    class="posi">
                <el-table-column
                        label="订单ID">
                </el-table-column>
                <el-table-column
                        label="用户手机号">
                </el-table-column>
                <el-table-column
                        label="昵称">
                </el-table-column>
                <el-table-column
                        label="收件地址">
                </el-table-column>
                <el-table-column
                        label="收件码图片">
                </el-table-column>
                <el-table-column
                        label="备注信息">
                </el-table-column>
                <el-table-column
                        label="取货点">
                </el-table-column>
                <el-table-column
                        label="取货地址">
                </el-table-column>
                <el-table-column
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        label="状态">
                </el-table-column>
                <el-table-column
                        label="操作">
                </el-table-column>
            </el-table>
        </template>
        <!--        门店列表展示帮我送-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}"
                    :class="{visible:boolean1}"
                    class="posi">
                <el-table-column
                        label="订单ID">
                </el-table-column>
                <el-table-column
                        label="用户手机号">
                </el-table-column>
                <el-table-column
                        label="昵称">
                </el-table-column>
                <el-table-column
                        label="地址">
                </el-table-column>
                <el-table-column
                        label="发件信息">
                </el-table-column>
                <el-table-column
                        label="收件信息">
                </el-table-column>
                <el-table-column
                        label="备注信息">
                </el-table-column>
                <el-table-column
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        label="下单时间">
                </el-table-column>
                <el-table-column
                        label="状态">
                </el-table-column>
                <el-table-column
                        label="操作">
                </el-table-column>
            </el-table>
        </template>




    </div>
</template>

<script>
    export default {
        name: "DingDanComponent",
        data(){
            return{
                arr:["帮我买", "帮我取", "帮我送"],
                color0:"#0ff",
                color1:"#000",
                color2:"#000",
                formInline: {
                    name: '',
                    tel: '',
                    status:'',
                    mendian:'',
                },
                options: [{
                    value: '选项1',
                    label: '全部'
                }, {
                    value: '选项2',
                    label: '已取消'
                }, {
                    value: '选项3',
                    label: '待接单'
                }, {
                    value: '选项4',
                    label: '已接单配送中'
                }, {
                    value: '选项5',
                    label: '已完成'
                }],
                value1: '',
                tableData:[],
                boolean:true,
                boolean1:true,

            }

        },
        created() {
          this.refresh();
        },
        methods:{
            change0(){
                this.color0 = "#0ff"
                this.color1 = "#000"
                this.color2 = "#000"
                this.boolean =true;
                this.boolean1 =true;
                this.refresh();
            },
            change1(){
                this.color1 = "#0ff"
                this.color0 = "#000"
                this.color2 = "#000"
                this.boolean = false;
                this.boolean1 = true;
                this.refresh();
            },
            change2(){
                this.color2 = "#0ff"
                this.color1 = "#000"
                this.color0 = "#000"
                this.boolean =true;
                this.boolean1 =false;
            },
            refresh(){
                this.axios.get("http://43.143.190.87:8091/panghudaojiaBackend/deliveryOrder/queryDeliveryOrderList?pageNum=1&pageSize=10&orderType=3&userPhone=&shopName=&status=0&userName=&startTime=&endTime=").then((res)=>{
                    console.log(res);
                    this.tableData = res.data.data.list;
                })
            },
            //搜索日期
            onSubmit() {
                this.axios.get("http://43.143.190.87:8091/panghudaojiaBackend/deliveryOrder/queryDeliveryOrderList?pageNum=1&pageSize=10&orderType=3&userPhone=&shopName=&status=0&userName=&startTime=&endTime=").then(res=>{
                    console.log(res.data)
                    this.allObj = res.data;
                    this.tableData = res.data.data.list;
                }).catch(err=>{})
            },

        }
    }
</script>

<style scoped>
    .dingdan{
        padding: 20px;
        position: relative;
    }
    .topLi{
        display: inline;
        padding: 10px 15px;
    }
    .topLi:first-of-type{
        color: #00ffff;
    }
    .posi{
        position: absolute;
        left: 0;
        top: 160px;
    }
    .visible{
        opacity: 0;
    }
</style>